<template>
  <div class="module_box">
    <div class="box">
      <i><span></span></i>
    </div>
    <!-- <div class="box2">
      <i><span></span></i>
    </div>
    <div class="box3">
      <i class="el-icon-video-play"></i>
    </div> -->
  </div>
</template>
<script>
export default {
  name: "LoadingView",
  data() {
    return {};
  },
};
</script>
<style scoped>
.module_box {
  height: 400px;
  display: flex;
}
.box {
  position: relative;
  width: 240px;
  height: 240px;
  border: 24px solid rgba(0, 0, 0, 0.03);
  border-radius: 50%;
  margin-left: 10px;
  margin-top: 10px;
}
.box i {
  width: 240px;
  height: 240px;
  position: absolute;
  animation: circleRotate 5s infinite linear;
}
.box i span {
  position: absolute;
  left: 180px;
  top: 25px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #254ff7;
}
.box2 {
  margin-left: 50px;
  margin-top: 50px;
  width: 200px;
  height: 200;
  border: 3px solid pink;
  border-radius: 50%;
  position: relative;
}
.box2 i {
  width: 200px;
  height: 200px;
  position: absolute;
  animation: circleRotate 3s infinite linear;
  border-radius: 50%;
}
.box2 i span {
  width: 8px;
  height: 8px;
  position: absolute;
  border-radius: 50%;
  left: 163px;
  top: 20px;
  background: rgb(139, 214, 233);
}
.box3 {
  width: 300px;
  height: 300px;
  position: relative;
  text-align: center;
}
.box3 i {
  color: #1296db;
  line-height: 300px;
  font-size: 30px !important;
  animation: circleRotate 2s infinite linear;
}
@keyframes circleRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
